const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const ExtractTextPluginWebpack = require('extract-text-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')  //删除dist文件夹 webpack插件
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    loader:'postcss-loader',
    options:{
      //css兼容性配置
      postcssOptions:{
        plugins:[
          [
            require('postcss-loader')
          ]
        ]
      }
    }
  }
]

module.exports = {
  mode:'production',
  devtool: 'inline-source-map',
  entry: path.resolve(__dirname, './src/main.js'),
  output:{
    path:path.resolve(__dirname,'dist'),
    publicPath:'/',
    fileName:'[name].js'
  },

  module:{
    rules:[
      {
        test:/.jsx?$/,
        exclude: /node-modules/,
        use:'babel-loader',
      },
      {
        test:/.css$/,
        exclude: /node-modules/,
        use:new ExtractTextPluginWebpack.extract({
          fallback:'style-loader',
          use:'css-loader'
        }),
      },
      {
        test:/.scss$/,
        use:'style-loader!css-loader!postcss-loader!sass-loader',
        options:{
          plugins:()=>[
            require('autoprefixer')
          ]
        }
      },
      {
        test:/.(png|svg|jpg|gif|webf)?$/,
        use:[
          {
            loader:'url-loader',
            options:{
              limit:10000,
              name:'img/[name].[hash:8].[ext]'
            }
          }  
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: 'file-loader?esModule=false',
      },
    ]
  },
  plugins:[
    new HtmlwebpackPlugin({
      template:'public/index.html', //指定模板路径
      filename:'index.html', //指定文件名
      title:'这是rect的页面',
      hash:true,
      minify:{//压缩html
        collapseWhitespace:true,
        removeComments:true
      }
    }),
    new CleanWebpackPlugin(['dist']),
    new ExtractTextPluginWebpack('[name].css'),
    new OptimizeCssAssetsWebpackPlugin(),
  ],
  resolve:{
    extensions:['.json','.js','.css','.scss','.less','jsx','.vue'],
    alias:{
      '@':resolve('src'),
      'src':resolve('src'),
    },
  },
  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    inline:true,
    hot:true,
    host:'localhost',
    compress: true,
    port: 8080,
    open:true
  },
}